<template>
  <f7-page>
    <f7-navbar title="头像" back-link></f7-navbar>

      <div class="tien-bar bg-white">
      <div class='action'>
        <span class='tien-icon-title text-blue'></span>头像形状
      </div>
    </div>
    <div class="padding bg-white">
      <div class="tien-avatar round" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></div>
      <div class="tien-avatar radius margin-left" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></div>
    </div>
    <div class="tien-bar bg-white margin-top">
      <div class='action'>
        <span class='tien-icon-title text-blue'></span>头像尺寸
      </div>
    </div>
    <div class="padding bg-white">
      <div class="tien-avatar sm round margin-left" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></div>
      <div class="tien-avatar round margin-left" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></div>
      <div class="tien-avatar lg round margin-left" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></div>
      <div class="tien-avatar xl round margin-left" style="background-image:url(https://image.weilanwl.com/img/square-4.jpg);"></div>
    </div>
    <div class="padding bg-white">
      <div class="tien-avatar sm round margin-left bg-red"> A</div>
      <div class="tien-avatar round margin-left bg-red">B</div>
      <div class="tien-avatar lg round margin-left bg-red">C</div>
      <div class="tien-avatar xl round margin-left bg-red">D</div>
    </div>
    <div class="padding bg-white">
      <div class="tien-avatar sm round margin-left bg-red"> 蔚</div>
      <div class="tien-avatar round margin-left bg-red">蓝</div>
      <div class="tien-avatar lg round margin-left bg-red">
        <span>wl</span>
      </div>
      <div class="tien-avatar xl round margin-left bg-red">
        <span class='avatar-text'>网络</span>
      </div>
    </div>
    <div class="tien-bar bg-white margin-top">
      <div class='action'>
        <span class='tien-icon-title text-blue'></span>内嵌文字(图标)
      </div>
    </div>
    <div class="padding">
      <div class="tien-avatar radius">
        <span class='tien-icon-people text-red'></span>
      </div>
      <div class="tien-avatar text-red radius  margin-left">
        <span>港</span>
      </div>
    </div>

    <div class="tien-bar bg-white margin-top">
      <div class='action'>
        <span class='tien-icon-title text-blue'></span>头像颜色
      </div>
    </div>
    <div class="padding-sm bg-white">
      <div v-for="(item,idx) in ColorList" :class=" 'bg-'+item.name" class="tien-avatar round lg  margin-xs" >
        <span class='avatar-text'>{{item.name}}</span>
      </div>
    </div>
    <div class="tien-bar bg-white margin-top">
      <div class='action'>
        <span class='tien-icon-title text-blue'></span>头像组
      </div>
    </div>
    <div class='padding  bg-white'>
      <div class="tien-avatar-group">
        <div class="tien-avatar round lg" v-for="(idex) in 4" :style=" 'background-image:url(https://image.weilanwl.com/img/square-'+idex+'.jpg);' "></div>
      </div>
    </div>

    <div class="tien-bar bg-white margin-top">
      <div class='action'>
        <span class='tien-icon-title text-blue'></span>头像标签
      </div>
    </div>
    <div class='padding bg-white '>
      <div class="tien-avatar round lg margin-left" v-for="(index) in 4" :style=" 'background-image:url(https://image.weilanwl.com/img/square-'+index+'.jpg);' ">
        <div :class=" index%2==0?'tien-icon-female bg-pink':'tien-icon-male bg-blue' " class="tien-tag badge "></div>
      </div>
    </div>


  </f7-page>

</template>

<script>
import '../../css/colorui/text.css';
import '../../css/colorui/avatar.css';
import '../../css/colorui/tag.css';
export default {
  name:'avatar',
  data() {
    return {
      ColorList: [{
        title: '嫣红',
        name: 'red',
        color: '#e54d42'
      },
      {
        title: '桔橙',
        name: 'orange',
        color: '#f37b1d'
      },
      {
        title: '明黄',
        name: 'yellow',
        color: '#fbbd08'
      },
      {
        title: '橄榄',
        name: 'olive',
        color: '#8dc63f'
      },
      {
        title: '森绿',
        name: 'green',
        color: '#39b54a'
      },
      {
        title: '天青',
        name: 'cyan',
        color: '#1cbbb4'
      },
      {
        title: '海蓝',
        name: 'blue',
        color: '#0081ff'
      },
      {
        title: '姹紫',
        name: 'purple',
        color: '#6739b6'
      },
      {
        title: '木槿',
        name: 'mauve',
        color: '#9c26b0'
      },
      {
        title: '桃粉',
        name: 'pink',
        color: '#e03997'
      },
      {
        title: '棕褐',
        name: 'brown',
        color: '#a5673f'
      },
      {
        title: '玄灰',
        name: 'grey',
        color: '#8799a3'
      },
      {
        title: '草灰',
        name: 'gray',
        color: '#aaaaaa'
      },
      {
        title: '墨黑',
        name: 'black',
        color: '#333333'
      },
      {
        title: '雅白',
        name: 'white',
        color: '#ffffff'
      },
    ]
    };
  },
  mounted() {
    
  },
  methods: {
    
    
  },
};
</script>

